<!--
  数据观测用， 停车场用户关联表列表管理页面
  User: zsj
  Date: 2020-05-11
-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" lang="zh">
<head>
    <meta charset="utf-8"/>
    <title>数据观测用， 停车场用户关联表管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="" name="数据观测用， 停车场用户关联表后台服务中心"/>
    <meta content="" name="GaoXiang"/>
    <th:block th:replace="body/head-page :: dva_head_page"/>
</head>

<body class="page-content-white  fade-in-up">

<!-- BEGIN CONTAINER -->
<div class="page-container">


    <!-- BEGIN PAGE TOOLS-->
    <!--查询条件示例 使用时取消hide样式-->
    <div class="portlet light hide">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-paper-plane font-green-haze"></i>
                <span class="caption-subject bold font-green-haze uppercase">搜索</span>
                <span class="caption-helper">点击右侧搜索按钮开始检索</span>
            </div>
            <div class="tools">
                <a href="javascript:void(0);" class="collapse" data-original-title="收起" title="收起"></a>
                <a href="javascript:void(0);" class="fullscreen" data-original-title="全屏" title="全屏"></a>
            </div>
        </div>
        <div class="portlet-body">
            <!--
            <div class="form-inline" role="form" id="table-param">
                <div class="form-group form-md-line-input has-success">
                    <input type="text" class="form-control" name="name" value="" placeholder="name">
                    <div class="form-control-focus"></div>
                </div>
                <button class="btn btn-success btn-tools-search"><i class="icon-magnifier"></i> 搜索</button>
                <button class="btn btn-danger btn-tools-reset" data-url-param="&current=1&size=10"><i class="icon-reload"></i> 重置
                </button>
            </div>
            -->
        </div>
    </div>
    <!-- END PAGE TOOLS-->

    <!-- BEGIN PAGE TABLE-->
    <div class="portlet light">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-speech  font-blue-hoki"></i>
                <span class="caption-subject font-blue-hoki">数据观测用， 停车场用户关联表数据表</span>
                <span class="caption-helper">
                    当前查询条件下有：<span class="show-page-total">0</span> 条数据，
                    总计：<span class="show-page-count">0</span> 页，
                    当前显示第：<span class="show-page-current">0</span> 页，
                    首行为第：<span class="show-page-begin">0</span> 条数据。
                    页面存在缓存数据，请您在操作后等待五分钟再刷新列表，或者点击右侧刷新按钮。
                </span>
            </div>

            <div class="tools">
                <a href="" class="collapse" data-original-title="" title=""> </a>
                <a href="" class="reload btn-tools-refresh" data-cache-name="dvaCache5M" data-original-title="" title=""> </a>
                <a href="" class="fullscreen" data-original-title="" title=""> </a>
            </div>

        </div>
        <div class="table-toolbar">
            <div class="row">
                <div class="col-md-6">
                    <div shiro:hasPermission="'accountPark:add'" class="btn-group">
                        <a href="javascript:void(0);" class="btn green btn-module-add">
                            数据观测用， 停车场用户关联表添加 <i class="fa fa-plus"></i>
                        </a>
                    </div>
                </div>
                <div class="col-md-6">
                    <div shiro:hasPermission="'accountPark:delete'" class="btn-group pull-right">
                        <button class="btn btn-danger btn-module-delete-all"> 批量删除 <i class="fa fa-times"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="portlet-body table-responsive">
            <div class="table-scrollable">
                <table th:data-page-size="${page['size']}"
                       th:data-current-page="${page['current']}"
                       th:data-total-counts="${page['total']}"
                       th:data-page-counts="${page.getPages()}"
                       data-visible-pages="10"
                       class="table table-bordered table-hover"
                       id="table">
                    <thead>
                    <tr>
                        <th class="table-checkbox">
                            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                <input type="checkbox" class="checkbox-all" title="全选"><span></span>
                            </label>
                        </th>
                        <th></th>
                        <th>账号id</th>
                        <th>停车场id</th>
                        <th>区id</th>
                        <th>停车场名称</th>
                        <th>账号名</th>
                        <th>区名称</th>
                        <th>市id</th>
                        <th>市名称</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="data,iterStat : ${page['records']}">
                        <td class="center">
                            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                <input type="checkbox" class="checkbox-child"
                                       title="选择此条数据" th:value="${data['id']}"><span></span>
                            </label>
                        </td>
                                    <td th:title="${data['id']}" th:text="${#strings.abbreviate(data['id'],32)}"></td>
                                    <td th:title="${data['accountId']}" th:text="${#strings.abbreviate(data['accountId'],32)}"></td>
                                    <td th:title="${data['parkId']}" th:text="${#strings.abbreviate(data['parkId'],32)}"></td>
                                    <td th:title="${data['countyId']}" th:text="${#strings.abbreviate(data['countyId'],32)}"></td>
                                    <td th:title="${data['parkName']}" th:text="${#strings.abbreviate(data['parkName'],32)}"></td>
                                    <td th:title="${data['accountName']}" th:text="${#strings.abbreviate(data['accountName'],32)}"></td>
                                    <td th:title="${data['countyName']}" th:text="${#strings.abbreviate(data['countyName'],32)}"></td>
                                    <td th:title="${data['cityId']}" th:text="${#strings.abbreviate(data['cityId'],32)}"></td>
                                    <td th:title="${data['cityName']}" th:text="${#strings.abbreviate(data['cityName'],32)}"></td>
                        <td>
                            <div class="btn-group btn-group-xs btn-group-solid">
                                <button shiro:hasPermission="'accountPark:edit'" th:data-id="${data['id']}" class="btn btn-success btn-module-edit"> 查看\编辑 </button>
                                <button shiro:hasPermission="'accountPark:delete'" th:data-id="${data['id']}" class="btn btn-danger btn-module-delete"> 删除 </button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <ul class="pagination">
                <li>
                    <select class="form-control" id="pageSize">
                        <optgroup label="每页显示行数"></optgroup>
                        <option th:attr="selected=${page['size']==3?true:false}" value="3">3</option>
                        <option th:attr="selected=${page['size']==5?true:false}" value="5">5</option>
                        <option th:attr="selected=${page['size']==10?true:false}" value="10">10</option>
                        <option th:attr="selected=${page['size']==20?true:false}" value="20">20</option>
                        <option th:attr="selected=${page['size']==50?true:false}" value="50">50</option>
                        <option th:attr="selected=${page['size']>50?true:false}"
                                th:value="${page['size']}" th:text="'自定义：'+${page['size']}">自定义</option>
                    </select>
                </li>
            </ul>
            <ul class="pagination" id="pagination"></ul>
        </div>
    </div>
    <!-- END PAGE TABLE-->
</div>
<!-- END CONTAINER -->


<th:block th:replace="body/javascript-page :: javascript_page"/>
<script>

    $(document).ready(function () {

        //初始化页面
        initList({
            table: "table",               //表格ID
            url: "/accountPark/page",           //表格分页url
            ajax: true                    //为true时伪静态刷新指定ID的table
        });

    });


    /**
     * 添加模块
     */
    function addModule(){
        tools.loadPage("/accountPark/add", null, function(html){
            window.layer_addModule = layer.open({
                id:"addModule",
                type: 1,
                title:"数据观测用， 停车场用户关联表添加",
                /* area:['900px','600px'],*/
                area:'900px',
                content: html,
                anim:1,
                shadeClose:false,
                cancel: function(){}
            });
        });
    }

    /**
     * 编辑模块
     */
    function editModule(id){
        tools.loadPage("/accountPark/edit", {"id":id}, function(html){
            window.layer_editModule = layer.open({
                id:"editModule",
                type: 1,
                title:"数据观测用， 停车场用户关联表编辑",
                /* area:['900px','600px'],*/
                area:'900px',
                content: html,
                anim:1,
                shadeClose:false,
                cancel: function(){}
            });
        });
    }

    /**
     * 删除单个
     * @param id 要删除的id
     */
    function deleteById(id){
        layer.confirm("确定删除么？",function() {
            tools.post("/accountPark/delete", {"id":id}, function (data) {
                if(data.success){
                    layer.msg('删除成功！', {icon: 1,time:1000},function(){
                        //跳转到第一页
                        toPage(1);
                    });
                }else{
                    tools.errorTip(data);
                }
            });
        });
    }


    /**
     * 批量删除
     */
    function deleteByIds(){
        let ids = getIds($('#table').find(".checkbox-child:checked"));
        if(ids.length === 0){
            layer.msg("请先选择要删除的条目！", {icon: 2,time:1000});
            return;
        }
        layer.confirm("确定删除选中信息么？",function(){
            tools.post("/accountPark/deleteByIds",{"ids":ids.join(",")},function(data){
                if(data.success){
                    layer.msg('批量删除成功！', {icon: 1,time:1000},function(){
                        //跳转到第一页
                        toPage(1);
                    });
                }else{
                    tools.errorTip(data);
                }
            });
        });
    }

</script>
</body>
</html>